import React from 'react';
import { Button, Row, Col, Input } from 'antd';
import CommonListsIndex from '../../../components/CommonLists/index';
import SearchBar from '../../../components/SearchBar';
import ListComponent from './list';
import AddComponent from './add';

class RiskTypeIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'riskType';
    this.addComponent = AddComponent;
    this.editComponent = AddComponent;
    this.listsComponent = ListComponent;
    this.model_width = 500;
  }

  componentDidMount() {
    this.freshQueryList();
  }

  getSearchList = () => {
    return [
      {
        name: 'name',
        component: <Input placeholder='风险类型' />,
      },
      {
        name: 'createBy',
        component: <Input placeholder='创建人' />,
      },
      {
        name: 'updateBy',
        component: <Input placeholder='修改人' />,
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    return (
      <div>
        <SearchBar
          searchList={this.getSearchList()}
          query={this.freshQueryList}
          onChange={this.refreshFilter}
          reset={this.resetListAndSearch}
        />
        <div className='inner-content'>
          <Row type='flex' justify='space-between' align='middle' className='pb-10'>
            <Col span={6}>
              <Button type='primary' onClick={this.add}>
                添加风险类型
              </Button>
            </Col>
          </Row>
          <div>
            <ListsComponent
              {...this.state}
              edit={this.edit}
              queryList={this.freshQueryList}
              showDetail={this.showDetail}
              refreshTableFilter={this.refreshTableFilter}
              onChangePagination={this.onChangePagination}
              queryTableParams={this.queryTableParams}
              rowKey='id'
            />
          </div>
        </div>
      </div>
    );
  }
}

export default RiskTypeIndex;
